/**
* @description: 月计划
* @author: jiwei
* @date:
**/
<template>
  <view class="month-main">
    <nav-bar class="header" :background="backgroundColor" back title="月计划查看" @goBack="goBack">
      <view slot="text" class="currentyear">
        {{yearValue}}
      </view>
      <van-icon class="imgLeft" name="arrow-down" slot="selectyear" @click="selectYear" />
    </nav-bar>
    <view class="month-content">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />
      <view class="basic-info">
          <van-form>
          <van-field  v-model="monthForm.engName" label="工程名称" placeholder="请选择工程名称"
                      type="textarea" autosize  rows="1"
                      disabled
                     :rules="[{ required: true, trigger:'onSubmit'}]" input-align="right"
                     right-icon="arrow" error-message-align="right" @click="onOpenPicker('engName')" />
          <van-field v-model="monthForm.siteName" label="站点名称" placeholder="请选择站点名称" disabled
                     :rules="[{ required: true, trigger:'onSubmit'}]" input-align="right"
                     right-icon="arrow" error-message-align="right" @click="onOpenPicker('siteName')" />
          <van-field v-model="monthForm.consDeptName" name="taskname" label="施工单位" placeholder="请输入施工单位"
                     input-align="right" error-message-align="right"  disabled
                     :rules="[{ required: true,trigger:'onChange', message: '' }]"/>
          <van-field v-model="monthForm.consName" name="taskname" label="施工负责人" placeholder="请输入施工负责人"
                     input-align="right" error-message-align="right"  disabled
                     :rules="[{ required: true,trigger:'onChange', message: '' }]"/>
          <van-field v-model="monthForm.batchName" name="taskname" label="工程批次" placeholder="请输入工程批次"
                     input-align="right" error-message-align="right"  disabled
                     :rules="[{ required: true,trigger:'onChange', message: '' }]"/>
          </van-form>

        </view>
      <plateTitle title="计划查看" :isRequired="false" class="plate-title" />
      <view class="plan-show">
        <uni-table ref="table" stripe>
            <uni-tr  :style="{ backgroundColor: '#F5F6F8' }">
              <uni-th v-for="(item,index) in columns" :key="index" align="center" :width="item.width">{{ item.label }}</uni-th>
            </uni-tr>
            <uni-tr v-for="(item,index) in tableData" :key="index" :style="{ backgroundColor: '#F5F6F8' }">
              <uni-td align="center">{{item.deviceTypeName}}{{item.completed}}/{{item.amount}}</uni-td>
              <uni-td align="center">{{item.monthAmout?item.monthAmout:'-'}}</uni-td>
              <uni-td align="center">{{item.installationQuantityAmout}}</uni-td>
              <uni-td align="center">{{item.singleMachinesAmout}}</uni-td>
              <uni-td align="center">{{item.connectNetworkAmout}}</uni-td>
              <uni-td align="center">{{item.rectification}}</uni-td>
            </uni-tr>
        </uni-table>
      </view>
    </view>
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker :type="datepickertype" :formatter="formatter"  cancel-button-text="清空"
                           @confirm="onDatetimeConfirm" @cancel="onDatetimeEmpty" v-model="currentDate"
                           :min-date="minDate"/>
    </van-popup>
  <!-- 选择工程名称 -->
    <van-popup v-model="showSelectProject" position="bottom">
      <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="projectNameColumns"
                  @confirm="onConfirmProject" @cancel="showSelectProject = false" />
    </van-popup>
<!-- 选择工程站点   -->
    <van-popup v-model="showSelectSite" position="bottom">
      <van-picker :title="pickerName" ref="typePicker" show-toolbar :columns="siteNameColumns"
                  @confirm="onConfirmSite" @cancel="showSelectSite = false" />
    </van-popup>
  </view>
</template>
<script>
import moment from "moment/moment";
import plateTitle from '../../common/plateTitle.vue'
import navBar from "../../../../components/common/nav-bar.vue";
import UniTr from "../../../../uni_modules/uni-table/components/uni-tr/uni-tr.vue";
import {mapGetters} from "vuex";
import {merge} from "lodash";
import {Toast} from "vant";
export default {
  name: 'index',
  components: {UniTr, navBar,plateTitle},
  props: {},
  data() {
    return {
      backgroundColor:'#417ADC',
      yearValue:'',
      datepickertype:'year-month',
      currentDate: '',
      minDate: new Date(0),
      showPicker: false,
      monthForm: {
        engName:'',
        siteName:'',
        consDeptName:'',
        consName:'',
        batchName:'',
      },
      showSelectProject: false,
      showSelectSite: false,
      columns: [
        {
          label:'设备类型',
          width:'80',
        },
        {
          label:'计划',
          width:'42',
        },
        {
          label:'安装',
          width:'42',
        },
        {
          label:'单机',
          width:'42',
        },
        {
          label:'联网',
          width:'42',
        },
        {
          label:'整改',
          width:'42',
        },
      ],
      tableData:[],
      pickerName:'',
      projectNameColumns:[],
      siteNameColumns:[],
      monthPlanId:'',//月计划id
      engId:'',//工程名称id
      siteId:'' //站点id
    };
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  onLoad() {
    this.yearValue = moment(new Date()).format('YYYY-MM')
    this.getMonthDefaultM()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/index/index'
      })
    },
    // 获取工程名称
    getProjectName() {
      let params = {
        date: this.yearValue,
        userId: this.userData.USERID,
      }
      this.$apiRequest.gcgkApi.getEngList(params).then(res => {
        this.projectNameColumns = res.data.map(item => {
          return {
            text: item.engName,
            value: item.engId,
            monthId: item.monthPlanId
          };
        })
      })
    },
    // 获取站点名称
    getSiteName() {
      let params = {
        monthPlanId: this.monthPlanId,
        engId: this.engId,
      }
      this.$apiRequest.gcgkApi.getSiteList(params).then(res => {
        this.siteNameColumns = res.data.map(item => {
          console.log(item,2323232)
          return {
            text: item.stationName,
            value: item.stationId,
          };
        })
      })
    },
    // 获取默认列表
    getMonthDefaultM() {
      let params = {
        date: this.yearValue,
        userId: this.userData.USERID
      }
      this.$apiRequest.gcgkApi.getMonthDefault(params).then(res => {
        if(res.code == 500) {
          this.monthForm = {
                engName:'--',
                siteName:'--',
                consDeptName:'--',
                consName:'--',
                batchName:'--',
          }
          this.tableData = {}
          Toast('查无数据');
        }else {
          this.monthForm = res.data
          this.tableData = res.data.devices
        }
      })
    },
    // 获取列表
    getList() {
      let params = {
        monthPlanId:this.monthPlanId,
        engId: this.engId,
        siteId: this.siteId,
        userId: this.userData.USERID,
        roleId: this.userData.ROLEID
      }
      this.$apiRequest.gcgkApi.getDetails(params).then(res => {
          merge(this.monthForm,res.data)
          this.tableData = res.data.devices
      })
    },
    formatter(type, val) {
      if(this.datepickertype == "date"){
        if (type === 'year') {
          return `${val}年`;
        }else if (type === 'month'){
          return `${val}月`;
        }else if (type === 'day'){
          return `${val}日`;
        }
      }else{
        if (type === 'year') {
          return `${val}年`;
        }else if (type === 'month'){
          return `${val}月`;
        }
      }
    },
    selectYear() {
      this.currentDate = new Date()
      console.log(this.showPicker,'232323')
      this.showPicker = true;
    },
    onDatetimeConfirm(value) {
      let timeString = "";
      timeString = this.datepickertype == "year-month" ? moment(value).format('YYYY-MM') : moment(value).format(
          'YYYY-MM-DD')
      this.yearValue = timeString;
      this.getMonthDefaultM()
      this.showPicker = false
    },
    onDatetimeEmpty() {
      this.showPicker = false
      this.yearValue = "";
    },
    onOpenPicker(e) {
      if(e === 'engName') {
        this.pickerName = '工程名称'
        this.getProjectName()
        this.showSelectProject = true
      }else if(e === 'siteName') {
        this.pickerName = '站点名称'
        this.getSiteName()
        this.showSelectSite = true

      }
    },
    onConfirmProject(value) {
      this.monthForm.engName = value.text
      this.monthPlanId = value.monthId
      this.engId = value.value
      this.monthForm.siteName = ''
      this.showSelectProject = false
    },
    onConfirmSite(value) {
      this.monthForm.siteName = value.text
      this.siteId = value.value
      this.showSelectSite = false
      this.getList()
    },
  }
};
</script>
<style scoped lang="scss">
.month-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  .header {
    position: sticky;
    top: 0;
    .imgLeft {
      width: px2vw(48);
      margin-right: px2vw(40);
      line-height: px2vh(80);
    }
    .currentyear{
      font-size: px2vh(48);
      font-weight: normal;
      line-height: px2vh(70);
    }
  }
  .month-content {
    width: calc(100vw - #{px2vw(60)});
    margin-left: px2vw(30);
    height: calc(100vh - #{px2vh(250)});
    margin-top: px2vh(50);
    background: #F2F6FA;
    overflow: auto;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .basic-info,.plan-show {
      background: #fff;
      border-radius: px2vw(20);
    }
    .basic-info {
      margin-bottom: px2vh(50);
    }
    .plan-show {
      min-height: px2vh(730);
      padding: px2vh(50) px2vw(40);
    }
  }
}
.uni-table-th {
  font-size: 12px;
}
.uni-table-td {
  font-size: 10px;
  line-height: 16px;
  padding: 8px 0;
}
</style>
